<template>
  <view class="order-list-wrap">
    <h-tab flex>
      <h-tab-pane label="全部" name="1">
        <h-scroll-list ref="scrollAll" :height="130">
          <view class="order-list-item-wrap">
            <view class="order-list-title-wrap">
              <text>订单号: 123123123123123213</text>
              <text class="order-list-status-txt">待付款</text>
            </view>

            <view class="order-list-content-wrap">
              <view class="order-list-content-left">
                <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"/>
              </view>
              <view class="order-list-content-right">
                <view class="order-list-title">成人游泳区培训（8-12）人大班（北航校区）</view>
                <view class="order-list-price">￥880.00</view>
              </view>
            </view>

            <view class="order-list-foot-wrap">
              <view class="order-list-price-wrap">
                <view class="order-list-price-item">
                  <text class="order-list-price-label">优惠:</text>
                  <text class="order-list-price-num">￥0.00</text>
                </view>
                <view class="order-list-price-item">
                  <text class="order-list-price-label">订单总额:</text>
                  <text class="order-list-price-num order-list-price-num-all">￥0.00</text>
                </view>
              </view>
              <view class="order-list-btn-wrap">
                <h-button>取消</h-button>
                <h-button style="margin-left: 17rpx" type="primary">立即支付</h-button>
              </view>
            </view>
          </view>
          <view class="order-list-item-wrap">
            <view class="order-list-title-wrap">
              <text>订单号: 67855674545623q4</text>
              <text class="order-list-status-txt">待核销</text>
            </view>

            <view class="order-list-content-wrap">
              <view class="order-list-content-left">
                <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"/>
              </view>
              <view class="order-list-content-right">
                <view class="order-list-title">成人游泳区培训（8-12）人大班（北航校区）</view>
                <view class="order-list-price">￥880.00</view>
              </view>
            </view>

            <view class="order-list-foot-wrap">
              <view class="order-list-price-wrap">
                <view class="order-list-price-item">
                  <text class="order-list-price-label">优惠:</text>
                  <text class="order-list-price-num">￥0.00</text>
                </view>
                <view class="order-list-price-item">
                  <text class="order-list-price-label">订单总额:</text>
                  <text class="order-list-price-num order-list-price-num-all">￥0.00</text>
                </view>
              </view>
              <view class="order-list-btn-wrap">
                <h-button class-name="order-list-btn-text" type="text" @tap="handleQrcode">核销二维码</h-button>
              </view>
            </view>
          </view>
          <view class="order-list-item-wrap">
            <view class="order-list-title-wrap">
              <text>订单号: 657764656546123132</text>
              <text class="order-list-status-txt">已核销</text>
            </view>

            <view class="order-list-content-wrap">
              <view class="order-list-content-left">
                <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"/>
              </view>
              <view class="order-list-content-right">
                <view class="order-list-title">成人游泳区培训（8-12）人大班（北航校区）</view>
                <view class="order-list-price">￥880.00</view>
              </view>
            </view>

            <view class="order-list-foot-wrap">
              <view class="order-list-price-wrap">
                <view class="order-list-price-item">
                  <text class="order-list-price-label">优惠:</text>
                  <text class="order-list-price-num">￥0.00</text>
                </view>
                <view class="order-list-price-item">
                  <text class="order-list-price-label">订单总额:</text>
                  <text class="order-list-price-num order-list-price-num-all">￥0.00</text>
                </view>
              </view>
            </view>
          </view>
        </h-scroll-list>
      </h-tab-pane>
      <h-tab-pane label="待付款" name="2">
        <h-scroll-list :height="130">
          <view class="order-list-item-wrap">
            <view class="order-list-title-wrap">
              <text>订单号: 123123123123123213</text>
              <text class="order-list-status-txt">待付款</text>
            </view>

            <view class="order-list-content-wrap">
              <view class="order-list-content-left">
                <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"/>
              </view>
              <view class="order-list-content-right">
                <view class="order-list-title">成人游泳区培训（8-12）人大班（北航校区）</view>
                <view class="order-list-price">￥880.00</view>
              </view>
            </view>

            <view class="order-list-foot-wrap">
              <view class="order-list-price-wrap">
                <view class="order-list-price-item">
                  <text class="order-list-price-label">优惠:</text>
                  <text class="order-list-price-num">￥0.00</text>
                </view>
                <view class="order-list-price-item">
                  <text class="order-list-price-label">订单总额:</text>
                  <text class="order-list-price-num order-list-price-num-all">￥0.00</text>
                </view>
              </view>
              <view class="order-list-btn-wrap">
                <h-button>取消</h-button>
                <h-button style="margin-left: 17rpx" type="primary">立即支付</h-button>
              </view>
            </view>
          </view>
        </h-scroll-list>
      </h-tab-pane>
      <h-tab-pane label="待核销" name="3">
        <h-scroll-list ref="scrollNoWriteOff" :height="130">
          <view class="order-list-item-wrap">
            <view class="order-list-title-wrap">
              <text>订单号: 67855674545623q4</text>
              <text class="order-list-status-txt">待核销</text>
            </view>

            <view class="order-list-content-wrap">
              <view class="order-list-content-left">
                <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"/>
              </view>
              <view class="order-list-content-right">
                <view class="order-list-title">成人游泳区培训（8-12）人大班（北航校区）</view>
                <view class="order-list-price">￥880.00</view>
              </view>
            </view>

            <view class="order-list-foot-wrap">
              <view class="order-list-price-wrap">
                <view class="order-list-price-item">
                  <text class="order-list-price-label">优惠:</text>
                  <text class="order-list-price-num">￥0.00</text>
                </view>
                <view class="order-list-price-item">
                  <text class="order-list-price-label">订单总额:</text>
                  <text class="order-list-price-num order-list-price-num-all">￥0.00</text>
                </view>
              </view>
              <view class="order-list-btn-wrap">
                <h-button class-name="order-list-btn-text" type="text" @tap="handleQrcode">核销二维码</h-button>
              </view>
            </view>
          </view>
        </h-scroll-list>
      </h-tab-pane>
      <h-tab-pane label="已核销" name="4">
        <h-scroll-list :height="130">
          <view class="order-list-item-wrap">
            <view class="order-list-title-wrap">
              <text>订单号: 657764656546123132</text>
              <text class="order-list-status-txt">已核销</text>
            </view>

            <view class="order-list-content-wrap">
              <view class="order-list-content-left">
                <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"/>
              </view>
              <view class="order-list-content-right">
                <view class="order-list-title">成人游泳区培训（8-12）人大班（北航校区）</view>
                <view class="order-list-price">￥880.00</view>
              </view>
            </view>

            <view class="order-list-foot-wrap">
              <view class="order-list-price-wrap">
                <view class="order-list-price-item">
                  <text class="order-list-price-label">优惠:</text>
                  <text class="order-list-price-num">￥0.00</text>
                </view>
                <view class="order-list-price-item">
                  <text class="order-list-price-label">订单总额:</text>
                  <text class="order-list-price-num order-list-price-num-all">￥0.00</text>
                </view>
              </view>
            </view>
          </view>
        </h-scroll-list>
      </h-tab-pane>
    </h-tab>
    <h-toast></h-toast>
    <h-dialog :showClose="false" :maskClose="true" width="200PX" height="200PX" v-model="modalShow">
      <view class="order-list-modal">
        <canvas canvasId="qrcode-modal"  style="width: 200PX;height:200PX;" />
      </view>
    </h-dialog>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import uQRCode from '../../common/utils/uqrcode.js'
export default {
  name: "orderList",
  data() {
    return {
      triggeredAll: true,
      triggered: true,
      modalShow: false,
      qrcodeText: '二维码'
    }
  },
  methods: {
    /*
    * 核销二维码
    * */
    handleQrcode() {
      this.$refs.scrollAll && this.$refs.scrollAll.handleCloseTrigged()
      this.$refs.scrollNoWriteOff && this.$refs.scrollNoWriteOff.handleCloseTrigged()
      this.modalShow = true
      Taro.stopPullDownRefresh()
      uQRCode.make({
        canvasId: 'qrcode-modal',
        text: this.qrcodeText,
        size: 200,
        margin: 0,
        success: res => {},
      })
    }
  },
  watch: {
  }
}
</script>

<style lang="less">
.order-list-wrap {
  width: 100%;
  overflow: hidden;
  height: 100vh;
  padding-bottom: 100rpx;
  position: relative;
  box-sizing: border-box;
  background-color: #fdfcf5;
}
.order-list-item-wrap {
  width: 100%;
  height: auto;
  max-height: 433rpx;
  box-sizing: border-box;
  margin-top: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.order-list-title-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 25rpx;
  font-size: 24rpx;
  color: #888787;
  border-bottom: 1PX solid #efefef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-list-status-txt {
  color: #d5ad57;
}
.order-list-content-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16rpx;
  box-sizing: border-box;
  border-bottom: 1PX solid #efefef;
}
.order-list-content-left {
  width: 176rpx;
  height: 176rpx;
  box-sizing: border-box;
}
.order-list-content-left image {
  width: 176rpx;
  height: 176rpx;
  border-radius: 10rpx;
}
.order-list-content-right {
  flex: 1;
  padding-left: 25rpx;
  padding-right: 0;
  font-size: 26rpx;
  box-sizing: border-box;
  font-weight: 500;
  padding-top: 8rpx;
}
.order-list-price {
  margin-top: 20rpx;
}
.order-list-foot-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 25rpx;
}
.order-list-price-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  font-size: 26rpx;
}
.order-list-price-item:first-child {
  margin-right: 28rpx;
}
.order-list-price-item {
  color: #9c9c9c;
}
.order-list-price-num-all {
  color: #010101;
}
.order-list-price-label {
  margin-right: 20rpx;
}
.order-list-btn-wrap {
  width: 100%;
  height: auto;
  margin-top: 13rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.order-list-btn-text {
  justify-content: flex-end;
}
.order-list-modal {
  width: 200PX;
  height: 200PX;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
